{extend name="../index/public/mlay" /}
{block name="style"}
<style>
.allChecked {
			background-image: url('__TEM_STATIC__/img/check.png');
			background-size: cover;
		}
</style>
<!-- 公共css样式在这里 弹性布局也在这里 -->
<link rel="stylesheet" href="__TEM_STATIC__/css/public.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
{/block}
{block name="header"}{/block}
{block name="container"}
<div id="app">
			<div style="border-radius: 10px;margin: 0.5rem;font-size: 0.8rem;padding: 0.5rem 0;"
				class="flex bagfff ai_center">
				<img style="width: 1.4rem;height: 1.4rem;margin: 0 0.5rem;" src="../static/img/location.png">
				<div @click="modify_the_address" style="font-size: 0.65rem;" class="">
					<div>张三 <span style="color: #999999;">15555555555</span></div>
					<div class="flex">
						<div>河南省郑州市管城回族区河南省郑州市管城回族河南省郑州市管城回族区</div>
						<img style="width: 15px;height: 15px;" src="../static/img/my/rightThearrow.png">
					</div>
				</div>
			</div>
			<div style="margin: 0.5rem;padding-top: 1rem;border-radius: 10px;" class="bagfff">
				<div v-for="(item,index) in Data" :key="index" style="font-size: 0.8rem;">
					<div style="" class="flex ju_sb">
						<img style="width: 3.75rem;height: 3.75rem;border-radius: 10px;margin: 0 0.3rem;"
							src="../static/img/1.jpg">
						<div style="flex: 1;" class="flex ju_sb">
							<div class="">
								<div class="" v-cloak>
									{{item.text}}
								</div>
								<span style="background: #F2F2F2;color: #C5C5C5;font-size: 0.6rem;padding: 2px 5px;"
									class="" v-cloak>
									{{item.text1}}
								</span>
							</div>
							<div style="text-align: right;" id="">
								<div style="font-size: 0.6rem;" v-cloak id="">
									¥{{item.price}}
								</div>
								<div style="font-size: 0.6rem;color: #999999;" v-cloak id="">
									x{{item.num}}
								</div>
							</div>
						</div>
					</div>
					<div style="padding: 0.5rem 1rem;" class="flex ju_sb">
						<div id="">
							购买数量
						</div>
						<div style="border: 1px solid #C5C5C5;border-radius: 5px;" class="">
							<span @click="jian(item)" style="padding: 0 0.3rem;" id="">
								-
							</span>
							<span style="padding: 0 0.5rem;border: 1px solid #C5C5C5;" v-cloak id="">
								{{item.num}}
							</span>
							<span @click="jia(item)" style="padding: 0 0.3rem;" id="">
								+
							</span>
						</div>
					</div>
					<div style="font-size: 0.8rem;padding: 0 0.5rem 0 1rem;" class="">
						<div style="padding: 0.5rem 0;" class="flex ju_sb">
							<div id="">
								配送方式 <span style="color: #999999;">普通配送</span>
							</div>
							<div class="">
								快递：快递包邮
							</div>
						</div>
						<div style="padding: 0.5rem 0;" class="">
							订单备注 <span style="color: #999999;"><input type="text" placeholder="选填">
							</span>
						</div>
						<div style="text-align: right;padding: 0.5rem 0;" id="">
							<span style="color: #999999;" v-cloak>共{{item.num}}件</span>小计:<span style="color: #a78928;"
								v-cloak>￥{{item.price}}</span>
						</div>
					</div>
				</div>
			</div>
			<div style="margin: 0.5rem;padding: 1rem 0.5rem;border-radius: 10px;" class="flex ju_sb ai_center bagfff">
				<div class="flex ai_center" id="">
					<img style="width: 0.85rem;height: 0.85rem;margin-right: 0.25rem;"
						src="../img/icon_locationlocation.png">
					<span style="font-size: 0.7rem;">线下支付</span>
				</div>
				<div :class="{allChecked:allChecked}" @click="click()" style="width: 0.75rem;height: 0.75rem;border-radius: 50%;border: 1px solid #BBBBBB;" id="">

				</div>
			</div>
			<div style="height: 5rem;">
				
			</div>
			<div style="width: 100%;position: fixed;bottom: 0;text-align: right;padding: 1.5rem 0;" class="bagfff">
				<span style="font-size: 0.65rem;">
					<span style="color: #C5C5C5;" v-cloak]>共{{sum}}件</span> <span>合计</span><span
						style="color: #a78928;font-size: 0.75rem;" v-cloak>￥{{totalPrice}}</span>
				</span>
				<span
					style="background: #a78928;color: #fff;border-radius: 30px;font-size: 0.75rem;padding: 5px 15px;margin: 0 0.5rem;"
					id="">
					提交订单
				</span>
			</div>
		</div>
{/block}
{block name="script"}
<!-- 引入vue.js文件使用vue开发 -->
<script src="__TEM_STATIC__/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
<!-- vant -->
<script src="__TEM_STATIC__/js/public/vant-2.12.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 接口统一管理 -->
<script src="__TEM_STATIC__/js/http/api.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入axios请求库 -->
<script src="__TEM_STATIC__/js/http/axios.min.js" type="text/javascript"></script>
<!-- 再次封装axios 方便使用 -->
<script src="__TEM_STATIC__/js/http/http.js" type="text/javascript" charset="utf-8"></script>
<script>
 var settlement = new Vue({
 		el: "#app",
 		data() {
 			return {
 				allChecked: false, //全选状态  true|false
 				Data: [{
 					text: '准上人关热与相青音铁构素法百',
 					text1: '标准装:3盒装',
 					price: 15.9,
 					num: 1,
 				}, {
 					text: '准上人关热与相青音铁构素法百',
 					text1: '标准装:3盒装',
 					price: 15.3,
 					num: 1,
 				}, {
 					text: '准上人关热与相青音铁构素法百',
 					text1: '标准装:3盒装',
 					price: 15.3,
 					num: 1,
 				}, ]
 			}
 		},
 		//计算属性	
 		computed: {
 			totalPrice() { //总价
 				let totalPrice = 0
 				for (let i = 0; i < this.Data.length; i++) {
 					totalPrice += this.Data[i].price * this.Data[i].num
 				}
 				return Number(totalPrice.toFixed(2)); //总价
 			},
 			sum() { //总数
 				let sum = 0
 				for (let i = 0; i < this.Data.length; i++) {
 					sum += this.Data[i].num
 				}
 				return sum; //总数
 			},
 		},
 		//监听属性
 		watch: {
 
 		},
 		//钩子函数	
 		created() {
 
 		},
 		mounted() {
 
 		},
 		methods: {
 			jian(item) {
 				let num = item.num
 				if (num > 0) {
 					num -= 1
 				} else {
 					num = 0
 					return
 				}
 				item.num = num
 				console.log(item.num)
 			},
 			jia(item) {
 				let num = item.num
 				item.num = num + 1
 				console.log(item.num)
 			},
 			modify_the_address: function() {
 				window.location.href = "address_to_add.html"
 			},
 			click: function() {
 				this.allChecked = !this.allChecked;
 				console.log(this.allChecked);
 			}
 		}
 	})
 
</script>
{/block}
